<template>
	<view class="content">
		<view class="title">
			<text>欢迎来到</text>
			<text>绑定界面</text>
		</view>
		<u-form :model="form" ref="uForm">
			<u-form-item label="学号/工号" label-width="200" prop="username">
				<u-input v-model="form.username" />
			</u-form-item>
			<u-form-item label="密码" label-width="200" prop="password">
				<u-input v-model="form.password" type="password" password-icon="true" />
			</u-form-item>
			<u-form-item label="类型" label-width="200">
				<u-input v-model="actionSheetSel" type="select" @click="show = true" />
				<u-action-sheet :list="list" v-model="show" @click="actionSheetCallback" :cancel-btn="false">
				</u-action-sheet>
			</u-form-item>
			<u-button type="warning" shape="circle" @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '355380',
					password: '123123',
					roleType: "1",
					openid: ''
				},
				show: false,
				actionSheetSel: '学生',
				list: [{
						value: '1',
						text: '学生'
					},
					{
						value: '2',
						text: '教师'
					},
					{
						value: '3',
						text: '家长'
					},
				],
				rules: {
					username: [{
						required: true,
						message: '请输入学号/工号',
						trigger: 'blur',
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			actionSheetCallback(index) {
				this.actionSheetSel = this.list[index].text
				this.form.roleType = this.list[index].value
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					uni.showLoading({
					    title: '查询中'
					});
					if (valid) {
						uni.login({
							provider: 'weixin',
							success: res => {
								if (res.errMsg == "login:ok") {
									// 把code放在openid里面，用于接收code, 后台再根据code再次进行查询openid
									this.form.openid = res.code
									this.$myRequest({
										url: "/onWXRegister",
										method: 'POST',
										data: this.form
									}).then(res => {
										console.log(res)
										uni.setStorageSync('token', res.header['Authorization']);
										uni.setStorageSync('name',res.data.data.name);
										uni.setStorageSync('id',res.data.data.id)
										uni.setStorageSync('userId',res.data.data.userId);
										uni.setStorageSync('roleType',res.data.data.roleType)
										// uni.setStorageSync('token', res.data.data)
										uni.showToast({
											title: '绑定成功'
										})
										setTimeout(() => {
											
											uni.showModal({
											    title: '授权温馨提示',
												showCancel: false,
											    content: '请在接下来的微信授权窗口勾选不再询问,并点击【允许】,谢谢!',
												confirmText: '开始授权',
											    success: function (res) {
											        if (res.confirm) {
											            console.log('用户点击确定');
														uni.requestSubscribeMessage({
														  tmplIds: ['AS6Fjpz85uJDQdxrknjI8T65BQx6lVzGII_mH76rECQ','T94SQ1UbMAH8AgCl9NiaSwk-mHd2uRM7t9oZ3hRfWvs'],
														  success (res) {
															  console.log(res);
															  uni.switchTab({
															  	url: '/pages/index/index'
															  });
														  }
														})
											        } 
											    }
											});
										}, 1500)
									}).catch(res => {
										uni.hideLoading();
									})
								} else {
									uni.showModal({
										title: '登录失败',
										content: '系统异常，请联系管理员'
									});
								}
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onLoad(option) {
			this.form.openid = option.openid
			
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;

		.title {
			margin-bottom: 30rpx;

			text:nth-child(1) {
				font-weight: bold;
				font-size: 40rpx;
				text-align: center;
			}

			text:nth-child(2) {
				margin-left: 10rpx;
				color: #f90;
				font-weight: bold;
				font-size: 45rpx;
				text-align: center;
			}
		}
	}
</style>
